<template>
  <div class="discussion-container">
    <h1 class="discussion-title">讨论区</h1>
    <p class="course-name">课程名称: {{ course.name }}</p>
    <p class="course-name">课程名称: {{ courseId }}</p>
    <div class="search-container">
      <input
        type="text"
        v-model="searchQuery"
        placeholder="搜索帖子和评论..."
        class="search-input"
      />
      <button @click="searchDiscussions" class="search-button">搜索</button>
    </div>

    <div class="discussions">
      <div v-for="discussion in discussions" :key="discussion.id" class="discussion-item" @click="viewDiscussionDetail(discussion.id)">
        <h4 class="discussion-header">{{ discussion.user }} @ {{ discussion.date }}</h4>
        <p class="discussion-content">{{ discussion.content }}</p>
        <img v-if="discussion.image" :src="discussion.image" alt="讨论图片" class="discussion-image" />
      </div>
    </div>

    <div class="comment-section">
      <h2>发布帖子</h2>
      <textarea v-model="newDiscussion.content" placeholder="提出您的疑问或领悟..." class="discussion-textarea"></textarea>
      <div class="input-container">
        <input type="file" @change="onImageChange" accept="image/*" class="file-input" />
        <button @click="submitDiscussion" class="submit-button">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courseId: null,
      course: {}, // 存放课程信息
      discussions: [], // 存放讨论内容的数组
      newDiscussion: {
        content: '',
        image: null
      },
      searchQuery: '' // 新增搜索查询的状态
    };
  },
  created() {
    this.courseId = this.$route.params.courseId; // 获取路由中的 courseId
    this.fetchCourseInfo(); // 获取课程信息
    this.fetchDiscussions(); // 获取讨论内容
  },
  methods: {
    async fetchCourseInfo() {
      // API 调用获取课程信息
    },
    async fetchDiscussions() {
      // API 调用获取讨论内容
    },
    searchDiscussions() {
      // 在这里添加搜索功能逻辑
      alert(`搜索内容: ${this.searchQuery}`);
    },
    onImageChange(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = e => {
          this.newDiscussion.image = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    async submitDiscussion() {
      if (!this.newDiscussion.content) {
        alert('讨论内容不能为空!');
        return;
      }

      const discussion = {
        id: Date.now(), // 为了示例生成一个唯一 ID
        user: '当前用户',
        content: this.newDiscussion.content,
        image: this.newDiscussion.image,
        date: new Date().toLocaleString()
      };

      this.discussions.push(discussion);
      this.newDiscussion.content = '';
      this.newDiscussion.image = null;
    },
    viewDiscussionDetail(discussionId) {
      this.$router.push({ name: 'DiscussionDetail', params: { discussionId } });
    }
  }
};
</script>

<style scoped>
.discussion-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.discussion-title {
  text-align: center;
  color: #333;
}

.course-name {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.search-input {
  width: 70%;
  padding: 10px;
  border: 1px solid #007bff;
  border-radius: 5px 0 0 5px;
  outline: none;
  font-size: 14px;
}

.search-button {
  padding: 10px 15px;
  border: none;
  border-radius: 0 5px 5px 0;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #0056b3;
}

.discussions {
  margin-bottom: 20px;
}

.discussion-item {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  transition: box-shadow 0.3s;
}

.discussion-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.discussion-header {
  margin: 0 0 10px;
  font-size: 1.1em;
  color: #007bff;
}

.discussion-content {
  margin: 0 0 10px;
  line-height: 1.5;
}

.discussion-image {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  border-radius: 5px;
}

.comment-section {
  margin-top: 30px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
}

.input-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.discussion-textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
  font-size: 14px;
}

.file-input {
  margin-bottom: 10px;
  font-size: 14px;
  padding: 10px;
  border: 1px solid #007bff;
  border-radius: 5px;
  background-color: #f0f8ff;
  cursor: pointer;
  transition: border-color 0.3s;
}

.file-input:hover {
  border-color: #0056b3;
}

.submit-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #0056b3;
}
</style>
